<template>
    <div>
        <van-tabbar v-model="active" active-color="#ff5f16" inactive-color="#000" @change="changeTab">
            <van-tabbar-item>
                <!-- 使用vant的icon组件 -->
                <van-icon class="iconfont icon-dianying" slot="icon" size="20"></van-icon>
                <span>电影</span>
            </van-tabbar-item>
            <van-tabbar-item>
                <!-- 使用vant的icon组件 -->
                <van-icon class="iconfont icon-yingyuan" slot="icon" size="20"></van-icon>
                <span>影院</span>
            </van-tabbar-item>
            <van-tabbar-item>
                <!-- 使用vant的icon组件 -->
                <van-icon class="iconfont icon-wode" slot="icon" size="20"></van-icon>
                <span>我的</span>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
// 引入需要使用的vant组件
import Vue from "vue";
import { Tabbar, TabbarItem, Icon } from "vant";
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Icon);

// 引入需要的字体样式
import "@/assets/iconfont/iconfont.css";

export default {
    // data选项必须要求是一个函数，函数必须返回一个普通的对象
    data: function() {
        return {
            // active表示默认选中哪个菜单，0表示第一个菜单
            active: 0,
            // 定义好数组地址
            url: ["/films/nowPlaying", "/cinemas", "/center"],
        };
    },
    methods: {
        // 改变菜单后出发，形参是索引下标
        changeTab(index) {
            // 此处可以使用分支进行判断跳转地址，但是代码量比较多，不建议使用if与switch语句
            // 优化方案：提前定义好地址数组，让下标对应上
            this.$router.push(this.url[index]);
        },
    },
    // 在created生命周期中去解决地址因为刷新而导致的active归零的情况
    created() {
        // 获取地址栏中的路径
        // console.log(this.$route);
        let path = this.$route.path;
        let index = this.url.indexOf(path);
        // 纠正索引
        this.active = path === "/films/comingSoon" ? 0 : index;
    },
};
</script>

<style scoped></style>
